<template>
  <el-dialog v-model="dialogVisible" @close="handleDialogClose()" title="新建表单" width="98%" top="10px">
    <div id="app">
      <v-form-designer ref="vfDesigner" :banned-widgets="testBanned" :designer-config="designerConfig">
        <!-- 自定义按钮插槽演示 -->
        <template #customToolButtons>
          <el-button type="primary" @click="saveFormJson">在线保存</el-button>
        </template>
      </v-form-designer>
    </div>
    <template #footer>
      <!-- <el-button type="primary" @click="submitForm()"> 提交 </el-button> -->
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { fetchTemplateData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

let dialogVisible = ref(false);

const vfDesigner = ref(null)
const fieldListApi = reactive({
  URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
  labelKey: 'fieldLabel',
  nameKey: 'fieldName'
})
const testBanned = ref([
  //'sub-form',
  //'alert',
])
const designerConfig = reactive({
  languageMenu: true,
  exportCodeButton: true,
  generateSFCButton: false,
  //externalLink: false,
  //formTemplates: false,
  //eventCollapse: false,
  //clearDesignerButton: false,
  //previewFormButton: false,

  //presetCssCode: '.abc { font-size: 16px; }',
})

const saveFormJson = () => {
  let formJson = vfDesigner.value.getFormJson()
  //TODO: 将formJson提交给后端保存接口，需自行实现！！
  ElMessage.success('表单已保存！')
}

const handleDialogClose = () => {
  dialogVisible.value = false;
};

const submitForm = () => {
  dialogVisible.value = false;
  fetchTemplateData(
    mapStore.templateTableCurrentPage,
    mapStore.templateTablePageSize
  );
};

defineExpose({
  dialogVisible
});
</script>
<style scoped>

</style>
